import { createVNode, render } from 'vue'
import XtxConfirm from './xtx-confirm.vue'

const div = document.createElement('div')
div.setAttribute('class', 'xtx-confirm-container')
document.body.appendChild(div)

export default ({ title, text }) => {
  // 渲染组件
  // 1.导入消息组件提示框
  // 2.将消息提示组件编译成虚拟节点（dom节点）
  // carateVNode(组件实例，参数)
  // 3.准备一个装载XtxConfirm组件的容器
  // 4.将虚拟节点渲染到容器上
  return new Promise((resolve, reject) => {
    // 点击取消触发的函数
    const cancelCallback = () => {
      render(null, div)
      reject(new Error('点击取消'))
    }
    // 点击确认触发的函数
    function submitCallback() {
      render(null, div)
      resolve()
    }
    const vnode = createVNode(XtxConfirm, { title, text, cancelCallback, submitCallback })
    render(vnode, div)
  })
}
